<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="originateFormRules" :model="originateForm" label-position="left" label-width="140px">
      <el-form-item label="编码" prop="code">
        <el-input v-model="originateForm.code" />
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="originateForm.title" />
      </el-form-item>
      <el-form-item label="图标">
        <Upload v-model="originateForm.cover" />
      </el-form-item>
      <el-form-item label="网址" prop="webUrl">
        <el-input v-model="originateForm.webUrl" />
      </el-form-item>
      <el-form-item label="类型" prop="originateType">
            <el-select v-model="originateForm.originateType" placeholder="请选择">
              <el-option v-for="item in originateTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
      </el-form-item>
        <el-form-item label="设置" prop="setting">
             <el-table
              :data="originateForm.setting"
              style="width: 100%">
              <el-table-column
                prop="catalogueID"
                label="栏目"
                width="180">
              <template slot-scope="{row}">
                <span><el-input v-model="row.catalogueID" /></span>
              </template>
              </el-table-column>
              <el-table-column
                prop="url"
                label="数据源">
              <template slot-scope="{row}">
                <span><el-input v-model="row.url" /></span>
              </template>
              </el-table-column>
              <el-table-column
                prop="alias"
                label="别名">
              <template slot-scope="{row}">
                <span><el-input v-model="row.alias" /></span>
              </template>
              </el-table-column>
              <el-table-column
                prop="expireTime"
                label="过期时间">
              <template slot-scope="{row}">
                <span><el-input v-model="row.alias" /></span>
              </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="180">
              <template>
                <el-button type="primary" @click="handleChannelAdd()">
                  新增
                </el-button>
                <el-button v-if="allowedSettingRemove == true" type="danger" @click="handleChannelRemove(originateForm)">
                  删除
                </el-button>
              </template>
              </el-table-column>
            </el-table>
        </el-form-item>
      <el-form-item label="描述" prop="remark">
        <el-input v-model="originateForm.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="备注" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCannel()">
        取消
      </el-button>
      <el-button type="primary" @click="createData()">
        确认
      </el-button>
      <el-button v-if="originateForm.status.value === 5" type="danger" @click="handleDelete(originateForm)">
        删除
      </el-button>
    </div>
  </div>
</template>

<script>
import { saveOriginate, removeOriginateById, getOriginate } from '@/api/knowledge/originate'
import waves from '@/directive/waves' // waves directive
import Upload from '@/components/Upload/SingleImage2' // secondary package based on el-pagination
import { } from '@/utils'

export default {
  name: 'ComplexTable',
  components: { Upload},
  directives: { waves },
  filters: {
  },
  data() {
    return {
      tableKey: 0,
      allowedSettingRemove:false,
      originateTypeOptions:[
        {
          label:"门户",
          value:1
        },
        {
          label:"论坛",
          value:2
        },
        {
          label:"问答",
          value:3
        },
        {
          label:"政务",
          value:3
        },
        {
          label:"维权",
          value:4
        }
      ],
      originateForm: {
        code: '',
        title: '',
        originateType:1,
        cover:"",
        remark: '',
        setting:[
          {
            catalogueID:undefined,
            url:"",
            alias:"",
            expireTime:''
          }
        ],
        status: {
          label: '',
          value: 1
        }
      },
      originateFormRules: []
    }
  },
  created() {
    let originateID = this.$route.query && this.$route.query.originateID
    if (originateID !== undefined) {
      originateID = parseInt(originateID)
      if (!isNaN(originateID)) {
        this.listLoading = true
        const formData = {
          'originateID': originateID
        }
        getOriginate(formData).then(response => {
          if (response.status === 200) {
            this.originateForm = response.data
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })
      }
    }
    console.log(originateID)
  },
  methods: {
    handleCannel() {
      this.$router.push({ path: 'originate' })
    },
    handleChannelAdd:function(){
      this.originateForm.setting.push({
            catalogueID:undefined,
            url:"",
            alias:"",
            expireTime:""
      })
      if(this.originateForm.setting.length > 1 && this.allowedSettingRemove == false){
        this.allowedSettingRemove = true
      }
    },
    handleChannelRemove:function(item){
      this.originateForm.setting.forEach((row,index) => {
          if(row['catalogueID'] == item['catalogueID'] && row['url'] == item['url']){
            this.originateForm.setting.splice(index,1);
          }
      });
      if(this.originateForm.setting.length < 2){
        this.allowedSettingRemove = false
      }
    },
    createData() {
      this.listLoading = true
      const originateForm = this.originateForm
      try {
          originateForm.status = originateForm.status.value
          if(originateForm.status == undefined){
              originateForm.status = 6
          }
      } catch (error) {
        originateForm.status = 6
      }
      console.log(originateForm)
      if (originateForm.ID > 0) {
        originateForm.originateID = originateForm.ID
      }
      originateForm.setting = JSON.stringify(originateForm.setting)
      saveOriginate(originateForm).then(response => {
        if (response.status === 200) {
          this.$message({
            message: '操作Success',
            type: 'success'
          })
          this.$router.push({ path: 'originate' })
        } else {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    },
    handleDelete(row, index) {
      const fromdata = {
        'originateID': row.ID
      }
      removeOriginateById(fromdata).then(response => {
        if (response.status === 200) {
          this.$message({
            message: '操作Success',
            type: 'success'
          })
          this.$router.push({ path: 'originate' })
        } else {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
